<template>
    <page-header-wrapper :title="false">
      <a-card title="所有通话">
        <a-tabs @change="onTabs">
          <div slot="tabBarExtraContent">
            所有通话
            <a-divider type="vertical" />
            <span class="font16">通时有10秒左右的延时</span>
            <a-divider type="vertical" />
            <span class="font16">今日总通时 <a>{{(callData.call_num/60).toFixed(2)}}</a>分钟</span>
            <a-divider type="vertical" />
            <span class="font16">平均每人通时 <a>{{(callData.call_num_aver/60).toFixed(2)}}</a>分钟</span>
          </div>
          <a-tab-pane key="1" tab="APP拨号"></a-tab-pane>
          <a-tab-pane key="2" tab="软件拨号"></a-tab-pane>
          <a-tab-pane key="3" tab="AX模式"></a-tab-pane>
        </a-tabs>
        <nan-fang v-if="currentTab == 1"></nan-fang>
        <kao-la v-if="currentTab == 2"></kao-la>
        <ax-modal v-if="currentTab == 3"></ax-modal>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  import NanFang from './components/NanFang'
  import KaoLa from './components/KaoLa'
  import AxModal from './components/AxModal'
  import { getData } from '@/api/calls'
  export default {
    components: {
      NanFang,
      KaoLa,
      AxModal
    },
    name: 'AllCalls',
    data () {
      return {
        currentTab: '1',
        callData: {}
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        getData().then(res => {
          if (res.status === 0) {
            this.callData = res.result
          }
        })
      },
      onTabs (key) {
        this.currentTab = key
      }
    }
  }
</script>

<style scoped>

</style>
